<template>
	<view style="width: 100%;">
		<view v-for="(item, index) in items" :key="index" style="min-height: 100rpx;width: 100%;">
			<view>
				<block v-if="isDetail2==0">
					<input type="text" v-model="item.value1" :placeholder="$t('请输入参数名称')" @input="input1" style="
					border: 4rpx solid #cccccc;border-radius: 12rpx;height: 60rpx;width: 220rpx;float: left;margin-top: 27rpx;"/>
					<input type="text" v-model="item.value2"  :placeholder="$t('请输入参数信息')" @input="input2" style="
					border: 4rpx solid #cccccc;border-radius: 12rpx;height: 60rpx;width: 270rpx;float: left;margin-left: 20rpx;margin-top: 27rpx;"/>
					
					<view v-if="items.length > 1" @click="removeItem(index)" style="float: left;width: 40rpx;margin-left: 10rpx;
					height: 40rpx;border-radius: 20rpx;background: red;color: #fff;line-height: 40rpx;
					text-align: center;font-size: 38rpx;font-weight: bolder;margin-top: 55rpx;">-</view>
				</block>
				<block v-if="isDetail2==1">
					<view style="margin-top: 20rpx;margin-bottom: 10rpx;">{{$t('自定义参数规格')}}</view>
					<input disabled  v-model="item.value1" :placeholder="$t('请输入参数名称')" @input="input1" style="
					border: 4rpx solid #cccccc;border-radius: 12rpx;height: 60rpx;width: 220rpx;float: left;margin-top: 27rpx;"/>
					<input disabled  v-model="item.value2"  :placeholder="$t('请输入参数信息')" @input="input2" style="
					border: 4rpx solid #cccccc;border-radius: 12rpx;height: 60rpx;width: 270rpx;float: left;margin-left: 20rpx;margin-top: 27rpx;"/>
				</block>
			</view>
		</view>
		
		<block v-if="isDetail2==0">
			<button @click="addItem" style="
			clear: both;border: 4rpx dashed #c7d8e6;background: #fff;color:#c7d8e6;font-size: 14px;margin-top: 15px;
			width: 87%;height: 80rpx;line-height: 80rpx;margin-left: 0%;">＋ {{$t('自定义参数规格')}}</button>
		</block>
		
		<view style="clear: both;"></view>
		
	</view>
</template>

<script>
	export default {
		props:{
			value:{
				type: [Array,Object],
				required: true,
				default: {},
			},
			isDetail2:{
				type: [Number,null],
				default: 0,
			},
		},
		data() {
			return {
				lang: getApp().globalData.lang,
				formData: {
					parameter:[]
				},
				items: [
					{ value1: '',value2:'' } // 初始为一个空的输入框
				],
			}
		},
		methods: {
			input1(){
				this.formData.parameter=this.items
				this.$emit("change",this.formData)
			},
			input2(){
				this.formData.parameter=this.items
				this.$emit("change",this.formData)
			},
			addItem() {
			  this.items.push({ value1: '',value2:'' }); // 添加一个新的空输入框
			  this.formData.parameter=this.items
			  this.$emit("change",this.formData)
			},
			removeItem(index) {
			  this.items.splice(index, 1); // 删除指定索引的输入框
			  this.formData.parameter=this.items
			  this.$emit("change",this.formData)
			},
		},
		mounted() {
			if(this.value){
				if(this.lang=='zh'){
					if(this.value.parameter){
						this.items = JSON.parse(this.value.parameter.replace(/'/g, '"'));
						this.formData.parameter=this.items
						this.$emit("change",this.formData)
					}
				}else{
					if(this.value.parameter_ru){
						this.items = JSON.parse(this.value.parameter_ru.replace(/'/g, '"'));
						this.formData.parameter=this.items
						this.$emit("change",this.formData)
					}
				}		
			}
		}
	}
</script>

<style>

</style>
